<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>查看子设备</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/public.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .fixed-title{
        width: 100%;
        background: #CFD8DE;
        padding: 6px 0;
        display: flex;
        font-size: 0.8rem;
        position: fixed;
        z-index: 99;
        top: 44px;
      }
      .fixed-title span{
        display: inline-block;
        width: 33%;
        padding: 6px;
        font-size: 0.8rem;
        text-align: center;
        box-sizing: border-box;
      }
      .fixed-title span:first-child {
        width: 40%;
      }
      
      .fixed-title span:last-child {
        width: 27%;
      }
      .list {
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      
      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 10px;
        right: 10px;
      }
      
      .list>div {
        width: 33%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
      }
      
      .list>div:first-child {
        width: 40%;
        
      }
      
      .list>div:last-child {
        width: 27%;
      }
      
      
      /* .arrow:after {
        right: 15px;
        content: '\e583';
      } */
      
      .arrow:after {
        font-family: Muiicons;
        font-size: inherit;
        line-height: 1;
        position: absolute;
        top: 50%;
        right: 2px;
        display: inline-block;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-decoration: none;
        color: #bbb;
        -webkit-font-smoothing: antialiased;
      }
      .text-center{
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">查看子设备</h1>
      </header>
      <div class="fixed-title">
        <span>设备名称</span>
        <span>功能位置编码</span>
        <span>操作</span>
        <!-- <span>所属项目</span> -->
      </div>
      <div class="mui-content bg-white" style="padding-top: 90px;">

        <ul id="groupRule"></ul>
      </div>
    </div>
  </body>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../js/sqlite.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
  <script src="./js/js.js"></script>
  <script type="text/javascript">
    mui.init()
    var mask = null;
    var detailVm = null;
    var cv = null; // 当前webview
    var pageId = ""; //获取详情id
    var databaseName = "offlineFiles"; //定义表的名字
    var bdName = "files"; //数据库的名字
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();
      pageId = cv.pageId || '';
      console.log(pageId)
      if (!validBdOpen(bdName)) {
        createDb(bdName)
      }
      plus.nativeUI.showWaiting('加载中...');
      detailVm.getDetail(pageId)
    })
    detailVm = new Vue({
      el: "#container",
      data: {
        detail: {}
      },
      created: function() {},
      methods: {
        godetail: function(item) {
          mui.openWindow({
            url: '../file/fileDetail.html',
            id: '../file/fileDetail.html',
            createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
            extras: {
              pageId: item.dataId
            }
          })
        },
        getDetail: function(pageId) {
          var that = this
          selectListSQL(bdName, "select " + selectName + " from " + databaseName + "",
            function(data) {
              console.log('查出数据表数据'+data.length );
              // if (data.length > 0) {
              var data = toTree(data)
              // console.log(JSON.stringify(toTree(data)))
              // console.log(JSON.stringify(data[0]))
              // }
              plus.nativeUI.closeWaiting()
              $("#groupRule").groupRule({
                title: '',
                mdmCode: '',
                childDocumentFlag: true,
                data: data[0].childDocuments,
                effect: 200
              });
            })

        },
      },

    })

    function toTree(data) {
      // 以这个节点为基础节点
      // console.log(JSON.stringify(data))
      const tree = [{
        id: pageId,
        childDocuments: []
      }]
      const children = data;
      //定义转换方法的具体实现
      let translator = (tree, children) => {
        //遍历父节点数据
        tree.forEach((parent) => {
          //遍历子节点数据
          children.forEach((current, index) => {
            //此时找到父节点对应的一个子节点
            if (current.parentId === parent.id) {
              //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
              let temp = JSON.parse(JSON.stringify(children))
              //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
              temp.splice(index, 1)
              //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
              translator([current], temp)
              //把找到子节点放入父节点的children属性中
              typeof parent.childDocuments !== 'undefined' ? parent.childDocuments.push(current) : parent.childDocuments = [ current ]
            }
          })
        })
      }

      //调用转换方法
      translator(tree, children);
      
      return tree;
    }
  </script>
</html>
